<template>
    <div id="subPage">
        <div class="left">
            <div class="item left_one">
                <div class="left_one_top">
                    <div class="left_one_top_icon">
                        <img src="../../assets/images/ags/quality/quality_total.png" />
                    </div>
                    <div class="left_one_top_title">质量问题汇总</div>
                </div>
                <div class="left_one_bottom">
                    <div class="left_one_bottom_chart">
                        <div id="present_device"></div>
                    </div>
                    <div class="center_bg"></div>
                </div>
            </div>
            <div class="item left_two">
                <div class="left_two_top">
                    <div class="left_two_top_icon">
                        <img src="../../assets/images/ags/quality/quality_check.png" />
                    </div>
                    <div class="left_two_top_title">质量检查</div>
                </div>
                <div class="left_two_center">
                    <div class="left_two_center_item">
                        <div class="text-item item1">
                            <div class="num1">{{ newIssueNum }}</div>
                            <div class="text">今日新增问题(项)</div>
                        </div>
                        <div class="text-item item2">
                            <div class="num2">{{ todoIssueNum }}</div>
                            <div class="text">今日待整改问题(项)</div>
                        </div>
                        <div class="text-item item3">
                            <div class="num3">{{ rectificationRate }}%</div>
                            <div class="text">累计整改完成率</div>
                        </div>
                    </div>
                </div>
                <div class="left_two_bottom">
                    <div class="text">近七天质量检查情况</div>
                    <div id="quality-check"></div>
                </div>
            </div>
        </div>
        <div class="center">
            <div class="top">
                <div class="img" style="display:flex;justify-content: center;align-items: center">
                    <div class="quality-box">
                        <rollNum :num="unfinishedObj.allNum" :unit="''"></rollNum>
                        <div class="text">超期</div>
                        <div class="name">累计超期问题：<span>{{ problemSummaryTotal }}个</span></div>
                    </div>
                    <div class="check-unfinished-bc wave_wrapper">
                        <span class="wave_scale"></span>
                        <span class="wave_scale delay"></span>
                    </div>
                    <div id="check-unfinished" style="width: 4rem;height:  4rem;"></div>
                    <div class="quality-list">
                        <div class="quality-item">
                            <div class="text">一般问题：{{ unfinishedObj.generalIssues }}个</div>
                            <div class="num">{{ unfinishedObj.generalIssuesPercent }}%</div>
                        </div>
                        <div class="quality-item">
                            <div class="text">紧急问题：{{ unfinishedObj.urgencyIssues }}个</div>
                            <div class="num">{{ unfinishedObj.urgencyIssuesPercent }}%</div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="bottom">
                <div class="bottom_top">
                    <div class="bottom_top_icon">
                        <img src="../../assets/images/ags/equip/status.png" />
                    </div>
                    <div class="bottom_top_title">近期上报问题信息</div>
                </div>
                <div class="bottom_table">
                    <div class="t-header">
                        <div class="td">检查时间</div>
                        <div class="td">检查人</div>
                        <div class="td">检查部位</div>
                        <div class="td">问题明细</div>
                        <div class="td">问题状态</div>
                    </div>
                    <div class="t-body">
                        <vue-seamless-scroll ref="seamlessScroll" :data="checkList" :class-option="rankOption" style="width: 100%;overflow:hidden;height: 90%">
                            <div class="tr" v-for="(item, index) in checkList" :key="index">
                                <div class="td">{{item.checkTime.substring(5, item.checkTime.length)}}</div>
                                <div class="td">{{ item.checkUserName }}</div>
                                <div class="td">{{ item.partName }}</div>
                                <div class="td">{{ item.issueContent }}</div>
                                <div class="td" v-if="item.state === 100" style="color:#4EBF94">已完成</div>
                                <div class="td" v-if="item.state === 30" style="color:#CFA371">待核验</div>
                                <div class="td" v-if="item.state === 20" style="color:#02B6C5">待复查</div>
                                <div class="td" v-if="item.state === 10 || item.state === 11 || item.state === 12" style="color:#D17272">待整改</div>
                            </div>
                        </vue-seamless-scroll>
                    </div>
                </div>
            </div>
        </div>
        <div class="right">
            <div class="item right_one">
                <div class="right_one_top">
                    <div class="right_one_top_icon">
                        <img src="../../assets/images/ags/quality/warn.png" />
                    </div>
                    <div class="right_one_top_title">本月质量隐患排名</div>
                </div>
                <div class="right_one_bottom">
                    <vue-seamless-scroll :data="rankList" :class-option="rankOption" style="width: 100%;overflow:hidden;height: 75%">
                        <div class="right_one_item" v-for="(item, index) in rankList" :key="index" :style="[{ backgroundImage: 'url(' + item.icon + ')' }]">
                            <div class="right_one_first">
                                <div class="right_one_first_rank">NO.{{ index + 1 }}</div>
                                <div class="right_one_first_type">{{ item.issueTypeName }}</div>
                            </div>
                            <div class="right_one_first_count">{{ item.num }}项</div>
                        </div>
                    </vue-seamless-scroll>
                </div>
            </div>
            <div class="item right_two">
                <div class="right_two_top">
                    <div class="right_two_top_icon">
                        <img src="../../assets/images/ags/quality/quality.png" />
                    </div>
                    <div class="right_two_top_title">质量动态</div>
                </div>
                <div class="right_two_bottom">
                    <vue-seamless-scroll ref="seamlessScroll" :data="changeList" :class-option="defaultOption" style="overflow:hidden;height:90%">
                        <div class="right_two_item" v-for="(item, index) in changeList" :key="index">
                            <div class="icon">
                                <img :src="item.imgUrl || defaultUrl" />
                            </div>
                            <div class="introduction">
                                <div class="introduction_item">
                                    <div class="top">
                                        <span>{{ item.opDesc }}</span>
                                    </div>
                                    <div class="bottom">
                                        <span>{{ item.opTime }}</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </vue-seamless-scroll>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import {
    getBoardQualityCheckAnalysis,
    getBoardQualityCheckList,
    getBoardQualityCheckLog,
    getBoardQualityCheckTypeStatistics,
    getBoardQualityCheckUnfinished
} from "@/api/md-board";
import vueSeamlessScroll from "vue-seamless-scroll";
import { initColors } from "@/mixins/colorObj";
import rollNum from "./components/rollNum";
import {
    addMonths,
    FMT_DATE_TIME,
    format,
    getMonthBeginStr
} from "@/sever/dateutil";
export default {
    name: "index",
    mixins: [initColors],
    components: {
        vueSeamlessScroll,
        rollNum
    },
    data() {
        return {
            defaultUrl: require("../../assets/images/ags/quality/quality-default.png"),
            //组织机构id
            deptId: "",
            classOption: {
                step: 0.5
            },
            //质量检查DOM
            checkDom: null,
            //排名数据列表
            rankList: [],
            //动态数据列表
            changeList: [],
            //质量问题汇总数
            problemSummaryTotal: 0,
            //时间
            dateArr: [addMonths(new Date(), -1), new Date()],
            //近期上报问题信息
            checkList: [],
            //今日新增问题数
            newIssueNum: 0,
            //今日待整改问题数
            todoIssueNum: 0,
            //累计整改完成率
            rectificationRate: 0,
            //秒表盘
            unfinishedDom: null,
            // 超期未销问题分析
            unfinishedObj: {}
        };
    },
    computed: {
        defaultOption() {
            return {
                step: 0.2, // 数值越大速度滚动越快
                limitMoveNum: 2, // 开始无缝滚动的数据量
                hoverStop: true, // 是否开启鼠标悬停stop
                direction: 1, // 0向下 1向上 2向左 3向右
                openWatch: true, // 开启数据实时监控刷新dom
                singleHeight: 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
                singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
                waitTime: 1000 // 单步运动停止的时间(默认值1000ms)
            };
        },
        rankOption() {
            return {
                step: 0.2, // 数值越大速度滚动越快
                limitMoveNum: 6, // 开始无缝滚动的数据量
                hoverStop: true, // 是否开启鼠标悬停stop
                direction: 1, // 0向下 1向上 2向左 3向右
                openWatch: true, // 开启数据实时监控刷新dom
                singleHeight: 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
                singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
                waitTime: 1000 // 单步运动停止的时间(默认值1000ms)
            };
        }
    },
    methods: {
        rankFormat(list) {
            if (list.length > 0) {
                if (list.length > 3) {
                    let sliceList = list.slice(0, 3);
                    let spliceList = list.splice(3);
                    sliceList[0]["icon"] = require("../../assets/images/ags/index/left_first.png");
                    sliceList[1]["icon"] = require("../../assets/images/ags/index/left_second.png");
                    sliceList[2]["icon"] = require("../../assets/images/ags/index/left_third.png");
                    spliceList.forEach(item => {
                        item["icon"] = require("../../assets/images/ags/index/left_fourth.png");
                    });
                    let mergeList = [...sliceList, ...spliceList];
                    return mergeList;
                }
                if (list.length == 1) {
                    list[0]["icon"] = require("../../assets/images/ags/index/left_first.png");
                    return list;
                }
                if (list.length == 2) {
                    list[0]["icon"] = require("../../assets/images/ags/index/left_first.png");
                    list[1]["icon"] = require("../../assets/images/ags/index/left_second.png");
                    return list;
                }
                if (list.length == 3) {
                    list[0]["icon"] = require("../../assets/images/ags/index/left_first.png");
                    list[1]["icon"] = require("../../assets/images/ags/index/left_second.png");
                    list[2]["icon"] = require("../../assets/images/ags/index/left_third.png");
                    return list;
                }
            }
        },
        drawProblemSummary(seriesData) {
            let leftChart = document.getElementById("present_device");
            let leftMyChart = this.$echarts.init(leftChart);
            let option;
            option = {
                tooltip: {
                    trigger: "item",
                    formatter: "{a}{b} : {c} ({d}%)",
                    confine: true
                },
                series: [
                    {
                        name: "",
                        type: "pie",
                        radius: ["25%", "85%"],
                        center: ["50%", "50%"],
                        roseType: "area",
                        itemStyle: {
                            borderRadius: 1
                        },
                        data: seriesData,
                        labelLine: {
                            normal: {
                                // 统⼀设置指⽰线长度
                                length: 2,
                                length2: 20,
                                lineStyle: {
                                    color: "#0161B2" // 改变标示线的颜色
                                }
                            }
                        },
                        label: {
                            formatter: "{titleName|{b}}\n{time|{c}}{name|项}",
                            padding: [-5, 0, 0, 0],
                            rich: {
                                time: {
                                    fontSize: "0.13rem",
                                    color: "#D8F0FE"
                                },
                                titleName: {
                                    fontSize: "0.115rem",
                                    color: "#D8F0FE",
                                    lineHeight: 17
                                },
                                name: {
                                    fontSize: "0.115rem",
                                    color: "#D8F0FE",
                                    lineHeight: 17
                                }
                            }
                        }
                    }
                ]
            };
            option && leftMyChart.setOption(option);
            window.addEventListener("resize", function() {
                leftMyChart.resize();
            });
        },
        qualityCheckCharts(
            data,
            newIssueNumArr,
            todoIssueNumArr,
            completeIssueNumArr
        ) {
            let chartDom = document.getElementById("quality-check");
            let myChart = this.$echarts.init(chartDom);
            let option;
            option = {
                color: [
                    {
                        type: "linear",
                        x: 0,
                        y: 0,
                        x2: 0,
                        y2: 1,
                        colorStops: [
                            { offset: 0, color: "rgba(72,157,243,0.4)" },
                            { offset: 1, color: "rgba(72,157,243,0)" }
                        ]
                    },
                    {
                        type: "linear",
                        x: 0,
                        y: 0,
                        x2: 0,
                        y2: 1,
                        colorStops: [
                            { offset: 0, color: "rgba(21,192,132,0.4)" },
                            { offset: 1, color: "rgba(21,192,132,0)" }
                        ]
                    },
                    {
                        type: "linear",
                        x: 0,
                        y: 0,
                        x2: 0,
                        y2: 1,
                        colorStops: [
                            { offset: 0, color: "#F8C44F" },
                            { offset: 1, color: "#F8C44F" }
                        ]
                    }
                ],
                tooltip: {
                    trigger: "axis",
                    axisPointer: {
                        type: "shadow"
                    }
                },
                legend: {
                    textStyle: {
                        fontSize: "0.12rem",
                        fontFamily: "Microsoft YaHei-Regular, Microsoft YaHei",
                        fontWeight: 400,
                        color: "#C6E9FC"
                    },
                    itemWidth: 15,
                    itemheight: 10,
                    left: "right",
                    data: [
                        {
                            name: "新增",
                            icon: "rect",
                            itemStyle: {
                                color: {
                                    type: "linear",
                                    x: 0,
                                    y: 0,
                                    x2: 0,
                                    y2: 1,
                                    colorStops: [
                                        {
                                            offset: 0,
                                            color: "rgba(107, 201, 255,0.2)"
                                        },
                                        {
                                            offset: 0.1,
                                            color: "rgba(107, 201, 255,1)"
                                        },
                                        {
                                            offset: 0.2,
                                            color: "rgba(72, 157, 243, 0.38)"
                                        },
                                        {
                                            offset: 1,
                                            color: "rgba(72, 157, 243, 0)"
                                        }
                                    ],
                                    global: false // 缺省为 false
                                }
                            }
                        },
                        {
                            name: "完成整改",
                            icon: "rect",
                            itemStyle: {
                                color: {
                                    type: "linear",
                                    x: 0,
                                    y: 0,
                                    x2: 0,
                                    y2: 1,
                                    colorStops: [
                                        {
                                            offset: 0,
                                            color: "rgba(21, 192, 132,0.2)"
                                        },
                                        {
                                            offset: 0.1,
                                            color: "rgba(21, 192, 132,1)"
                                        },
                                        {
                                            offset: 0.2,
                                            color: "rgba(21, 192, 132, 0.36)"
                                        },
                                        {
                                            offset: 1,
                                            color: "rgba(21, 192, 132, 0)"
                                        }
                                    ],
                                    global: false // 缺省为 false
                                }
                            }
                        },
                        {
                            name: "待整改"
                        }
                    ]
                },
                grid: {
                    left: "3%",
                    right: "4%",
                    bottom: "3%",
                    containLabel: true
                },
                xAxis: [
                    {
                        type: "category",
                        data: data,
                        axisLabel: {
                            show: true,
                            interval: 0,
                            fontSize: "0.12rem",
                            color: "#C6E9FC"
                        }
                    }
                ],
                yAxis: {
                    type: "value",
                    axisLine: {
                        show: false //去除轴线
                    },
                    axisLabel: {
                        fontSize: "0.12rem",
                        fontFamily: "Microsoft YaHei-Regular, Microsoft YaHei",
                        fontWeight: 400,
                        color: "#C6E9FC"
                    },
                    axisTick: {
                        show: false
                    },
                    splitLine: {
                        show: false
                    }
                },
                series: [
                    {
                        name: "新增",
                        type: "bar",
                        stack: "Search Engine",
                        barWidth: 20, //柱图宽度
                        emphasis: {
                            focus: "series"
                        },
                        data: newIssueNumArr,
                        markPoint: {
                            symbolSize: [20, 3],
                            symbol: "rect",
                            label: {
                                show: false
                            },
                            itemStyle: {
                                normal: {
                                    color: "rgba(72, 157, 243, 1)"
                                }
                            },
                            data: (function() {
                                const markData = [];
                                let len = data.length;
                                while (len--) {
                                    if (newIssueNumArr[len] != 0) {
                                        markData.push({
                                            xAxis: data[len],
                                            yAxis: newIssueNumArr[len],
                                            name: "",
                                            value: ""
                                        });
                                    }
                                }
                                return markData;
                            })()
                        }
                    },
                    {
                        name: "完成整改",
                        type: "bar",
                        stack: "Search Engine",
                        barWidth: 20, //柱图宽度
                        emphasis: {
                            focus: "series"
                        },
                        data: completeIssueNumArr,
                        markPoint: {
                            symbolSize: [20, 3],
                            symbol: "rect",
                            label: {
                                show: false
                            },
                            itemStyle: {
                                normal: {
                                    color: "rgba(21, 192, 132, 1)"
                                }
                            },
                            data: (function() {
                                const markData2 = [];
                                let len = data.length;
                                while (len--) {
                                    if (completeIssueNumArr[len] != 0) {
                                        markData2.push({
                                            xAxis: data[len],
                                            yAxis: completeIssueNumArr[len] + newIssueNumArr[len],
                                            name: "",
                                            value: ""
                                        });
                                    }
                                }
                                return markData2;
                            })()
                        }
                    },
                    {
                        name: "待整改",
                        type: "line",
                        stack: "Search Engine",
                        emphasis: {
                            focus: "series"
                        },
                        smooth: true,
                        data: todoIssueNumArr
                    }
                ]
            };

            option && myChart.setOption(option);
            myChart.on("legendselectchanged", function(params) {
                let newOption = myChart.getOption();
                if (params.selected["新增"] == false) {
                    newOption.series[1].markPoint.data = (function() {
                        const markData2 = [];
                        let len = data.length;
                        while (len--) {
                            if (completeIssueNumArr[len] != 0) {
                                markData2.push({
                                    xAxis: data[len],
                                    yAxis: completeIssueNumArr[len],
                                    name: "",
                                    value: ""
                                });
                            }
                        }
                        return markData2;
                    })();
                    myChart.setOption(newOption);
                } else {
                    newOption.series[1].markPoint.data = (function() {
                        const markData2 = [];
                        let len = data.length;
                        while (len--) {
                            if (completeIssueNumArr[len] != 0) {
                                markData2.push({
                                    xAxis: data[len],
                                    yAxis: completeIssueNumArr[len] + newIssueNumArr[len],
                                    name: "",
                                    value: ""
                                });
                            }
                        }
                        return markData2;
                    })();
                    myChart.setOption(newOption);
                }
            });
            window.addEventListener("resize", function() {
                myChart.resize();
            });
        },
        //超期未销问题分析
        getBoardQualityCheckUnfinishedFn() {
            let params = {
                deptId: this.deptId,
                startTime: format(this.dateArr[0], FMT_DATE_TIME),
                endTime: format(this.dateArr[1], FMT_DATE_TIME)
            };
            getBoardQualityCheckUnfinished(params).then(res => {
                if (res.code == 200) {
                    this.unfinishedObj = res.data || {};
                } else {
                    this.$Message.warning(res.msg);
                }
            })
            .catch(error => console.log(error));
        },
        //质量动态
        getBoardQualityCheckLogFn() {
            let params = {
                deptId: this.deptId,
                pageNum: 1,
                pageSize: 100
            };
            getBoardQualityCheckLog(params).then(res => {
                if (res.code == 200) {
                    this.changeList = res.data.list || [];
                } else {
                    this.$Message.warning(res.msg);
                }
            })
            .catch(error => console.log(error));
        },
        //质量检查
        getBoardQualityCheckAnalysisFn() {
            let params = {
                deptId: this.deptId
            };
            getBoardQualityCheckAnalysis(params).then(res => {
                if (res.code == 200) {
                    let data = res.data;
                    this.rectificationRate = data.rectificationRate || 0;
                    this.newIssueNum = data.newIssueNum || 0;
                    this.todoIssueNum = data.todoIssueNum || 0;
                    let dateList = [];
                    let newIssueNumArr = [];
                    let todoIssueNumArr = [];
                    let completeIssueNumArr = [];
                    let list = data.list;
                    for (let i = 0; i < list.length; i++) {
                        dateList.push(list[i].dateStr);
                        newIssueNumArr.push(list[i].newIssueNum);
                        todoIssueNumArr.push(list[i].todoIssueNum);
                        completeIssueNumArr.push(list[i].completeIssueNum);
                    }
                    this.qualityCheckCharts(
                        dateList,
                        newIssueNumArr,
                        todoIssueNumArr,
                        completeIssueNumArr
                    );
                } else {
                    this.$Message.warning(res.msg);
                }
            })
            .catch(error => console.log(error));
        },
        deepCopy(obj) {
            let newObj = obj.constructor === Array ? [] : {}; //判断是深拷贝对象还是数组
            for (let i in obj) {
                if (typeof obj[i] === "object") {
                    newObj[i] = this.deepCopy(obj[i]); //  如果要拷贝的对象的属性依然是个复合类型，递归
                } else {
                    newObj[i] = obj[i];
                }
            }
            return newObj;
        },
        //质量问题汇总
        async getProblemSummaryFn() {
            let params = {
                deptId: this.deptId
            };
            await getBoardQualityCheckTypeStatistics(params).then(async res => {
                if (res.code == 200) {
                    let list = res.data.list;
                    let seriesData = [];
                    let problemSummaryTotal = 0;
                    for (let i = 0; i < list.length; i++) {
                        let obj = {
                            name: list[i].issueTypeName,
                            value: list[i].num,
                            itemStyle: {
                                normal: {
                                    color: this.colorList[i]
                                }
                            }
                        };
                        problemSummaryTotal += list[i].num;
                        seriesData.push(obj);
                    }
                    if(seriesData.length>6){
                        let sortList = seriesData.sort((a,b)=>{
                            return b.value-a.value
                        })
                        let splitA = this.deepCopy(sortList).splice(0,5)
                        let splitB = this.deepCopy(sortList).splice(5)
                        let sums = 0
                        splitB.forEach(item=>{
                            sums+=item.value 
                        })
                        let totalList = {
                            name:'其他',
                            value:sums,
                            itemStyle: {
                                normal: {
                                    color: this.colorList[6]
                                }
                            }
                        }
                        splitA.push(totalList)
                        seriesData = splitA
                    }
                    this.problemSummaryTotal = problemSummaryTotal;
                    this.drawProblemSummary(seriesData);
                } else {
                    this.$Message.warning(res.msg);
                }
            })
            .catch(error => console.log(error));
        },
        //本月质量隐患排名
        getRankListFn() {
            let params = {
                deptId: this.deptId,
                startTime: getMonthBeginStr(new Date(), FMT_DATE_TIME),
                endTime: format(this.dateArr[1], FMT_DATE_TIME)
            };
            getBoardQualityCheckTypeStatistics(params).then(res => {
                if (res.code == 200) {
                    this.rankList = res.data.list || [];
                    this.rankList = this.rankFormat(this.rankList);
                } else {
                    this.$Message.warning(res.msg);
                }
            })
            .catch(error => console.log(error));
        },
        //近期上报问题列表
        getBoardQualityCheckListFn() {
            let params = {
                deptId: this.deptId,
                pageNum: 1,
                pageSize: 100
            };
            getBoardQualityCheckList(params).then(res => {
                if (res.code == 200) {
                    this.checkList = res.data.list || [];
                } else {
                    this.$Message.warning(res.msg);
                }
            })
            .catch(error => console.log(error));
        }
    },
    mounted() {
        this.deptId = this.$store.state.porjectObject.deptId;
        this.getProblemSummaryFn();
        this.getRankListFn();
        this.getBoardQualityCheckListFn();
        this.getBoardQualityCheckAnalysisFn();
        this.getBoardQualityCheckLogFn();
        this.getBoardQualityCheckUnfinishedFn();
    }
};
</script>

<style scoped lang="scss">
@function pxToRem($val) {
    @return $val/100 + rem;
}
@font-face {
    font-family: "led regular";
    src: url("../../assets/font/ds-digib-webfont.woff") format("woff");
}
@font-face {
    font-family: "auto_digital";
    src: url("../../assets/font/auto_digital.ttf") format("woff");
}
/deep/#subPage {
    width: 100%;
    height: 100%;
    min-width: pxToRem(1440);
    display: flex;
    justify-content: space-between;
    align-items: center;
    overflow: hidden;
    pointer-events: auto !important;
    .left,
    .right {
        width: pxToRem(440);
        min-width: pxToRem(440);
        height: 100%;
        overflow: hidden;
        display: flex;
        flex-flow: column nowrap;
        .item {
            width: 100%;
            height: pxToRem(320);
            background-image: url("../../assets/images/ags/index/left_panel.png");
            background-position: center;
            background-repeat: no-repeat;
            background-size: 100% 120%;
            padding: pxToRem(5) 0;
            box-sizing: border-box;
            margin-bottom: pxToRem(20);
        }
        .left_one {
            display: flex;
            flex-flow: column nowrap;
            .left_one_top {
                display: flex;
                justify-content: flex-start;
                margin-top: pxToRem(10);
                margin-left: pxToRem(80);
                .left_one_top_icon {
                    img {
                        width: pxToRem(28);
                        height: pxToRem(24);
                    }
                }
                .left_one_top_title {
                    width: pxToRem(200);
                    height: pxToRem(22);
                    font-size: pxToRem(22);
                    font-family: SourceHanSansCN-Medium;
                    line-height: pxToRem(25);
                    color: #a8dfff;
                    margin-left: pxToRem(10);
                }
            }
            .left_one_bottom {
                display: flex;
                justify-content: center;
                align-items: center;
                flex: 1;
                height: 100%;
                width: 100%;
                margin-left: pxToRem(7);
                .center_bg {
                    position: absolute;
                    height: pxToRem(165);
                    width: pxToRem(165);
                    background-image: url("../../assets/images/ags/equip/ring.png");
                    background-position: center;
                    background-repeat: no-repeat;
                    background-size: 100% 100%;
                    z-index: -1;
                    animation: turn 4s linear infinite;
                }
                // margin: pxToRem(20) pxToRem(20) 0 pxToRem(80);
                .left_one_bottom_chart {
                    width: 100%;
                    height: pxToRem(160);
                    #present_device {
                        width: 100%;
                        height: pxToRem(160);
                    }
                }
            }
        }
        .left_two {
            display: flex;
            flex-flow: column nowrap;
            .left_two_top {
                display: flex;
                justify-content: flex-start;
                margin-top: pxToRem(10);
                margin-left: pxToRem(80);
                .left_two_top_icon {
                    img {
                        width: pxToRem(24);
                        height: pxToRem(24);
                    }
                }
                .left_two_top_title {
                    width: pxToRem(220);
                    height: pxToRem(24);
                    font-size: pxToRem(22);
                    font-family: SourceHanSansCN-Medium;
                    line-height: pxToRem(22);
                    color: #a8dfff;
                    margin-left: pxToRem(10);
                }
            }
            .left_two_center {
                width: 80%;
                margin-top: pxToRem(15);
                margin-left: pxToRem(57);
                .left_two_center_item {
                    display: flex;
                    justify-content: space-around;
                    .item1 {
                        width: pxToRem(92);
                        display: flex;
                        flex-flow: column nowrap;
                        .num1 {
                            text-align: center;
                            font-size: pxToRem(18);
                            font-family: Microsoft YaHei-Regular,
                                Microsoft YaHei;
                            font-weight: 400;
                            color: #ecab62;
                        }
                    }
                    .item2 {
                        width: pxToRem(104);
                        display: flex;
                        flex-flow: column nowrap;
                        .num2 {
                            text-align: center;
                            font-size: pxToRem(18);
                            font-family: Microsoft YaHei-Regular,
                                Microsoft YaHei;
                            font-weight: 400;
                            color: #87b3ff;
                        }
                    }
                    .item3 {
                        width: pxToRem(85);
                        display: flex;
                        flex-flow: column nowrap;
                        .num3 {
                            text-align: center;
                            font-size: pxToRem(18);
                            font-family: Microsoft YaHei-Regular,
                                Microsoft YaHei;
                            font-weight: 400;
                            color: #5db2e4;
                        }
                    }

                    .text {
                        font-size: pxToRem(12);
                        font-family: Microsoft YaHei-Light, Microsoft YaHei;
                        font-weight: 300;
                        color: #d8f0fe;
                        overflow: hidden;
                        text-overflow: ellipsis;
                        white-space: nowrap;
                    }
                }
            }
            .left_two_bottom {
                width: 80%;
                height: 70%;
                margin: pxToRem(10) 0 0 pxToRem(56);
                #quality-check {
                    width: 100%;
                    height: 100%;
                }
                .text {
                    text-indent: pxToRem(15);
                    height: pxToRem(30);
                    margin-top: pxToRem(10);
                    font-size: pxToRem(12);
                    font-family: Microsoft YaHei-Regular, Microsoft YaHei;
                    font-weight: 400;
                    color: #819fb3;
                }
            }
        }
    }
    .left .item:first-of-type {
        background-image: url("../../assets/images/ags/quality/left_panel.png");
        background-size: 100% 118%;
        height: 35%;
    }
    .left .item:last-of-type {
        background-image: url("../../assets/images/ags/emp/left_panel.png") !important;
        height: 65%;
        background-size: 100% 109%;
        margin-bottom: 0;
    }
    .right .item:first-of-type {
        height: 36%;
        background-image: url("../../assets/images/ags/index/right_panel.png") !important;
    }
    .right .item:last-of-type {
        height: 62%;
        background-image: url("../../assets/images/ags/quality/right_panel.png") !important;
        background-size: 100% 108%;
        margin-bottom: 0;
    }
    .center {
        width: pxToRem(950);
        height: 100%;
        display: flex;
        flex-flow: column nowrap;
        .top {
            position: relative;
            width: 100%;
            height: 68%;
            padding: pxToRem(6);
            box-sizing: border-box;
            margin-bottom: pxToRem(5);
            .img {
                position: relative;
                width: 100%;
                height: 100%;
                box-sizing: border-box;
                overflow: hidden;
                .quality-box {
                    width: pxToRem(200);
                    height: pxToRem(200);
                    position: absolute;
                    top: 50%;
                    left: 50%;
                    transform: translate(-50%, -50%);
                    // background-color: RGBA(24, 75, 143, 0.5);
                    // border-radius: 50%;
                    z-index: 10;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    flex-direction: column;
                    .rollNum-main {
                        margin-bottom: pxToRem(5);
                        span {
                            // border: pxToRem(2) solid #03c3fd;
                            // box-shadow: rgba(255, 255, 255, 0.5) 0 0 pxToRem(5)
                            //     inset;
                            font-size: pxToRem(40);
                            font-weight: bold;
                            color: #ffffff;
                        }
                    }
                    .text {
                        font-size: pxToRem(16);
                        font-family: Source Han Sans CN-Regular,
                            Source Han Sans CN;
                        font-weight: 400;
                        color: #ffffff;
                    }
                    .name {
                        position: absolute;
                        bottom: -80%;
                        left: 50%;
                        width: pxToRem(180);
                        transform: translate(-45%, -170%);
                        font-size: pxToRem(16);
                        font-family: Microsoft YaHei-Regular, Microsoft YaHei;
                        font-weight: 400;
                        color: #d8f0fe;
                        span {
                            font-size: pxToRem(20);
                        }
                    }
                }
                .quality-list {
                    width: 95%;
                    position: absolute;
                    bottom: pxToRem(30);
                    left: 50%;
                    transform: translateX(-50%);
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                    .quality-item {
                        width: pxToRem(211);
                        height: pxToRem(53);
                        padding: 0 pxToRem(15);
                        box-sizing: border-box;
                        display: flex;
                        justify-content: space-between;
                        align-items: center;
                        background-image: url("../../assets/images/ags/quality/center_tab.png");
                        background-repeat: no-repeat;
                        background-size: 100% 100%;
                        .text {
                            white-space: nowrap;
                            font-size: pxToRem(12);
                            font-family: Microsoft YaHei-Regular,
                                Microsoft YaHei;
                            font-weight: 400;
                            color: #a8dfff;
                        }
                        .num {
                            font-size: pxToRem(26);
                            font-family: "led regular";
                            font-weight: bold;
                            color: #c6e9fc;
                        }
                    }
                }
                .check-unfinished-bc {
                    width: pxToRem(468);
                    height: pxToRem(512);
                    position: absolute;
                    top: 45%;
                    left: 50%;
                    transform: translate(-50%, -50%);
                    background-image: url("../../assets/images/ags/quality/center_tabs.png");
                    background-repeat: no-repeat;
                    background-size: 100% 100%;
                    // animation: shake .2s infinite alternate ease-in-out;
                }
                .page-list {
                    width: 90%;
                    position: absolute;
                    bottom: pxToRem(50);
                    left: 50%;
                    transform: translateX(-50%);
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                    z-index: 1000;
                    .page-item {
                        width: pxToRem(15);
                        height: pxToRem(15);
                        img {
                            display: block;
                            width: 100%;
                            height: 100%;
                            cursor: pointer;
                        }
                    }
                }
            }
        }
        .bottom {
            width: 100%;
            height: 30%;
            background-image: url("../../assets/images/ags/index/bottom_panel.png");
            background-repeat: no-repeat;
            background-size: 100% 100%;
            display: flex;
            flex-flow: column nowrap;
            .bottom_top {
                display: flex;
                justify-content: flex-start;
                align-items: center;
                margin: pxToRem(26);
                .bottom_top_icon {
                    img {
                        width: pxToRem(42);
                        height: pxToRem(15);
                    }
                }
                .bottom_top_title {
                    width: pxToRem(140);
                    height: pxToRem(22);
                    font-size: pxToRem(16);
                    font-family: SourceHanSansCN-Medium;
                    line-height: pxToRem(18);
                    color: #a8dfff;
                    margin-left: pxToRem(10);
                }
            }
            .bottom_table {
                width: 88%;
                margin: pxToRem(-30) 0 0 pxToRem(60);
                // margin: auto;
                height: pxToRem(230);
                overflow: hidden;
                .t-header {
                    width: 100%;
                    height: pxToRem(35);
                    display: flex;
                    justify-content: flex-start;
                    align-items: center;
                    overflow: hidden;
                    .td {
                        flex: 1;
                        text-align: center;
                        line-height: pxToRem(35);
                        margin-bottom: pxToRem(1);
                        font-size: pxToRem(12);
                        font-family: Microsoft YaHei-Regular, Microsoft YaHei;
                        font-weight: 400;
                        color: #00f0ff;
                    }
                }
                .t-body {
                    width: 100%;
                    height: calc(100% - 0.35rem);
                    overflow: hidden;
                    .tr {
                        height: pxToRem(30);
                        line-height: pxToRem(30);
                        width: 100%;
                        display: flex;
                        margin-bottom: pxToRem(1);
                        &:nth-child(2n-1) {
                            background: #0c1b2b;
                        }
                        .td {
                            flex: 1;
                            text-align: center;
                            line-height: pxToRem(30);
                            font-size: pxToRem(14);
                            font-family: Source Han Sans CN;
                            font-weight: 400;
                            color: #b5eeff;
                            overflow: hidden;
                            text-overflow: ellipsis;
                            white-space: nowrap;
                        }
                    }
                }
            }
        }
    }
    .right {
        .right_one {
            display: flex;
            flex-flow: column nowrap;
            .right_one_top {
                display: flex;
                justify-content: flex-start;
                margin-top: pxToRem(10);
                margin-left: pxToRem(55);
                .right_one_top_icon {
                    img {
                        width: pxToRem(28);
                        height: pxToRem(28);
                    }
                }
                .right_one_top_title {
                    width: pxToRem(220);
                    height: pxToRem(28);
                    font-size: pxToRem(22);
                    font-family: SourceHanSansCN-Medium;
                    line-height: pxToRem(28);
                    color: #a8dfff;
                    margin-left: pxToRem(10);
                }
            }
            .right_one_bottom {
                display: flex;
                flex-flow: column nowrap;
                height: 95%;
                margin: pxToRem(15) 0 0 pxToRem(50);
                .right_one_item {
                    display: flex;
                    justify-content: space-between;
                    background-repeat: no-repeat;
                    background-size: 100% 100%;
                    width: pxToRem(280);
                    margin-bottom: pxToRem(10);
                    .right_one_first {
                        width: pxToRem(180);
                        display: flex;
                        justify-content: flex-start;
                        .right_one_first_rank {
                            width: pxToRem(80);
                            margin-left: pxToRem(20);
                            color: #fcfcfe;
                            font-weight: bolder;
                            font-style: oblique;
                            font-size: pxToRem(13);
                        }
                        .right_one_first_type {
                            width: pxToRem(130);
                            text-align: left;
                            font-size: pxToRem(12);
                            font-family: Microsoft YaHei-Regular,
                                Microsoft YaHei;
                            font-weight: 400;
                            color: #d8f0fe;
                            overflow: hidden;
                            white-space: nowrap;
                            text-overflow: ellipsis;
                        }
                    }

                    .right_one_first_count {
                        font-size: pxToRem(12);
                        font-family: Microsoft YaHei-Regular, Microsoft YaHei;
                        font-weight: 400;
                        color: #75808a;
                    }
                }
            }
        }
        .right_two {
            display: flex;
            flex-flow: column nowrap;
            .right_two_top {
                display: flex;
                justify-content: flex-start;
                margin-top: pxToRem(10);
                margin-left: pxToRem(55);
                .right_two_top_icon {
                    img {
                        width: pxToRem(24);
                        height: pxToRem(24);
                    }
                }
                .right_two_top_title {
                    width: pxToRem(220);
                    height: pxToRem(24);
                    font-size: pxToRem(22);
                    font-family: SourceHanSansCN-Medium;
                    line-height: pxToRem(20);
                    color: #a8dfff;
                    margin-left: pxToRem(10);
                }
            }
            .right_two_bottom {
                display: flex;
                flex-flow: column;
                margin-top: pxToRem(10);
                margin-left: pxToRem(38);
                height: 95%;
                .right_two_item {
                    margin-bottom: pxToRem(10);
                    display: flex;
                    justify-content: flex-start;
                    align-items: center;
                    width: 84%;
                    background-image: url("../../assets/images/ags/quality/background_item.png");
                    background-repeat: no-repeat;
                    background-size: 100% 100%;
                    .icon {
                        margin: pxToRem(5) 0 0 pxToRem(12);
                        img {
                            width: pxToRem(110);
                            height: pxToRem(68);
                        }
                    }
                    .introduction {
                        .introduction_item {
                            .top {
                                margin: 0 0 0 pxToRem(18);
                                font-size: pxToRem(12);
                                font-family: Microsoft YaHei-Regular,
                                    Microsoft YaHei;
                                font-weight: 400;
                                color: #a8dfff;
                            }
                            .bottom {
                                margin: pxToRem(20) 0 0 pxToRem(18);
                                font-size: pxToRem(12);
                                font-family: Microsoft YaHei-Regular,
                                    Microsoft YaHei;
                                font-weight: 400;
                                color: #c6e9fc;
                            }
                        }
                    }
                }
            }
        }
    }

    @keyframes shake {
        0% {
            transform: translateX(-5px);
        }
        100% {
            transform: translateX(5px);
        }
    }
    @keyframes turn {
        0% {
            -webkit-transform: rotate(0deg);
        }
        25% {
            -webkit-transform: rotate(90deg);
        }
        50% {
            -webkit-transform: rotate(180deg);
        }
        75% {
            -webkit-transform: rotate(270deg);
        }
        100% {
            -webkit-transform: rotate(360deg);
        }
    }
}
/deep/ .rollNum-main ul li {
    font-family: "auto_digital" !important;
}
</style>
